<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="18">
              <a-col :md="6" :sm="24">
                <a-form-item label="门店名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请输入门店名称" v-model="queryParam.storeName" :dropdownMatchSelectWidth="false"
                    showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in storeNameList" :key="index" :value="item">{{ item
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入客户姓名模糊查询" v-model="queryParam.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="身份证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入身份证模糊查询" :maxLength="18" v-model.number="queryParam.num"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入手机号模糊查询" :maxLength="11" v-model.number="queryParam.tel"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="18">
              <a-col :md="6" :sm="24">
                <a-form-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入订单号模糊查询" v-model.number="queryParam.odd"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择查询的状态" v-model="queryParam.status" :dropdownMatchSelectWidth="false"
                    showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in statusList" :key="index" :value="item">{{ item
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="业务类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择查询的业务类型" v-model="queryParam.type" :dropdownMatchSelectWidth="false"
                    showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in typeList" :key="index" :value="item">{{ item
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :lg="6" :sm="24">
                <a-form-item label="业务员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!-- <a-select placeholder="请输入业务员" v-model="queryParam.ope"  :dropdownMatchSelectWidth="false"
           showSearch optionFilterProp="children">
               <a-select-option v-for="(item,index) in opeList" :key="index" :value="item.name" >{{ item.name }}</a-select-option>
              </a-select> -->
                  <a-input placeholder="请输入业务员" v-model="queryParam.ope"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="18">
              <a-col :md="8" :sm="24">
                <a-form-item label="开单时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-date placeholder="请输入开单时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.startTime1"></j-date>-
                  <j-date placeholder="请输入开单时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.startTime2"></j-date>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="寄存到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-date placeholder="请输入到期时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.endTime1"></j-date>-
                  <j-date placeholder="请输入到期时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.endTime2"></j-date>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="单据查询" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-range-picker v-model="queryParam.reception" format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" />
                  <!-- <j-date placeholder="请输入开始时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.startTime3"></j-date>-
                  <j-date placeholder="请输入结束时间" style="width: 140px;" dateFormat="YYYY-MM-DD"
                    v-model="queryParam.endTime3"></j-date> -->
                </a-form-item>
              </a-col>
              <!-- 详情搜索框detail -->
              <a-col :md="8" :sm="24">
                <a-form-item label="详情搜索" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入详情进行搜索" v-model="queryParam.bdetail"></a-input>
                </a-form-item>
              </a-col>

              <!-- <al-row>
              <a-col :md="6" :sm="24">
              <a-form-item label="typeR" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="typeR" v-model.number="queryParam.typeR"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
               <a-form-item label="statusR" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="statusR" v-model.number="queryParam.statusR"></a-input>
                </a-form-item>
                </a-col>
            </al-row> -->
              <a-col>
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button style="margin-left: 20px" type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 10px" @click="searchReset">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-button @click="handleAdd2" type="primary" icon="plus">业务配置</a-button>
          <a-button @click="CusHandleExportXls" type="primary" icon="download">导出业务信息</a-button>
          <!-- <a-button @click="CusHandleExportXlsAll" type="primary" icon="download">一键导出业务列表</a-button> -->
        </div>
        <div>
          <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
            :pagination="ipagination" :loading="loading" :scroll="{ x: 2100 }"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="myHandlePrint(record)">打印</a>
              <!-- <a-divider  v-if="btnEnableList.indexOf(1)>-1"  type="vertical" />
              <a  v-if="btnEnableList.indexOf(1)>-1" @click="handleEdit(record)">opeType</a> -->
              <a-divider type="vertical" />
              <a @click="myHandleDetail(record, 4, '详情')">详情</a>
              <!-- <a-divider v-if="btnEnableList.indexOf(6) > -1 && !(record.status == '已完结' || record.status == '已续存')" -->
                <!-- type="vertical" /> -->
              <a-divider
                v-if="(record.status == '存续中' || record.status == '已逾期') && (record.type !== '回收') || (record.type == '续存' && record.status !== '已完结' && record.status !== '已续存') || ((record.type == '寄存' || record.type == '过桥') && record.status !== '已完结' && record.status !== '已续存')"
                type="vertical" />
              <!-- <a-divider  v-if="(record.status == '存续中' || record.status == '已逾期') && (record.type !== '回收')"  type="vertical" /> -->
              <!-- <a-popconfirm  placement="topLeft" v-if="(record.status == '存续中' || record.status == '已逾期') && (record.type !== '回收')" title="确定存续吗?" @confirm="handleEdit(record,1,'续存')"> -->
              <a-popconfirm placement="topLeft"
                v-if="(record.status == '存续中' || record.status == '已逾期') && (record.type !== '回收') || (record.type == '续存' && record.status !== '已完结' && record.status !== '已续存') || ((record.type == '寄存' || record.type == '过桥') && record.status !== '已完结' && record.status !== '已续存')"
                title="确定存续吗?" @confirm="handleEdit(record, 1, '续存')">
                <a>续存</a>
              </a-popconfirm>
              <a-divider
                v-if="(record.status == '存续中' && record.type !== '回收') || (record.type == '续存' && record.status !== '已完结' && record.status !== '已续存') || ((record.type == '寄存' || record.type == '过桥') && record.status !== '已完结' && record.status !== '已续存')"
                type="vertical" />
              <a-popconfirm placement="topLeft"
                v-if="(record.status == '存续中' && record.type !== '回收') || (record.type == '续存' && record.status !== '已完结' && record.status !== '已续存') || ((record.type == '寄存' || record.type == '过桥') && record.status !== '已完结' && record.status !== '已续存')"
                title="确定还款吗?" @confirm="handleEdit(record, 3, '还款')">
                <a>还款</a>
              </a-popconfirm>

              <a-divider v-if="(record.status == '已逾期' || (record.type == '回收' && record.status !== '已完结'))"
                type="vertical" />
              <a-popconfirm placement="topLeft"
                v-if="(record.status == '已逾期' || (record.type == '回收' && record.status !== '已完结'))" title="确定变现吗?"
                @confirm="handleEdit(record, 2, '变现')">
                <a>变现</a>
              </a-popconfirm>
              <template v-if="$store.getters.username == '刘杰' || $store.getters.username == 'zhl'">
                <!-- <template v-if="$store.getters.username == '刘杰' && !(record.status == '已完结' || record.status == '已续存')"> -->
                <!-- <template v-if="record.status !== '已完结'"> -->
                <a-divider type="vertical" v-if="!(record.status == '已完结' || record.status == '已续存')" />
                <a-popconfirm title="确定删除吗?" v-if="!(record.status == '已完结' || record.status == '已续存')"
                  @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a-popconfirm title="确定修改吗?" @confirm="() => handleUpdate(record, '修改')">
                  <a>修改</a>
                </a-popconfirm>
              </template>
              <a-divider type="vertical" v-if="btnEnableList.indexOf(3) > -1"/>
              <a-popconfirm v-if="btnEnableList.indexOf(3) > -1"
                title="确定资产入库吗?" @confirm="() => handleEdit(record, 6, '资产入库')">
                <a :disabled="record.feedback == 1">资产入库</a>
              </a-popconfirm>
              <a-divider v-if="btnEnableList.indexOf(6) > -1 && !(record.status == '已完结' || record.status == '已续存')"
                type="vertical" />
              <a-popconfirm v-if="btnEnableList.indexOf(6) > -1 && !(record.status == '已完结' || record.status == '已续存')"
                title="确定修改业务备注吗?" @confirm="() => handleEdit(record, 5, '业务备注')">
                <a>业务备注</a>
              </a-popconfirm>
                <a-divider v-if="btnEnableList.indexOf(6) > -1 && !(record.status == '已完结' || record.status == '已续存')"
                type="vertical" />
              <a-popconfirm v-if="btnEnableList.indexOf(6) > -1 && !(record.status == '已完结' || record.status == '已续存')"
                title="确定修改冻结吗?" @confirm="() => handleEdit(record, 7, '冻结')">
                <a :disabled="record.status == '已冻结'">冻结</a>
              </a-popconfirm>
              <!-- <a-popconfirm v-if="btnEnableList.indexOf(3) > -1 && !(record.status == '已完结' || record.status == '已续存')"
                title="确定修改吗?" @confirm="() => handleEdit(record, 3, '业务备注')">
                <a>资产入库</a>
              </a-popconfirm> -->
            </span>
            <!-- 状态渲染模板 -->
            <template slot="customRenderFlag" slot-scope="status">
              <a-tag v-if="status === '存续中'" color="green">存续中</a-tag>
              <a-tag v-if="status === '已逾期'" color="red">已逾期</a-tag>
              <a-tag v-if="status === '已完结'" color="gray">已完结</a-tag>
              <a-tag v-if="status === '已续存'" color="blue">已续存</a-tag>
              <a-tag v-if="status === '已冻结'" color="black">已冻结</a-tag>
            </template>
            <!-- 状态渲染模板2-->
            <template slot="customRenderFlag2" slot-scope="fundSource,record">
              <span v-if="record.status === '已逾期'" style="color: red;">{{ fundSource }}</span>
              <span v-if="record.status !== '已逾期'" style="color: rgb(103,197,94);">{{ fundSource }}</span>
            </template>
          </a-table>
        </div>
        <!-- table区域-end -->
        <BusinessModal ref="modalForm" @ok="modalFormOk"></BusinessModal>
        <BusinessListPrint ref="BusinessListPrint"></BusinessListPrint>
        <BusinessConfigModal ref="BusinessConfigModal"></BusinessConfigModal>
        <BusinessModalUpdate @ok="modalFormOk" ref="BusinessModalUpdate"></BusinessModalUpdate>
        <BusinessModalEdit @ok="modalFormOk" ref="BusinessModalEdit"></BusinessModalEdit>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import BusinessModal from './modules/BusinessModal'
import BusinessListPrint from './dialog/BusinessListPrint'
import moment from 'moment';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import BusinessConfigModal from './modules/BusinessConfigModal'
import BusinessModalEdit from './modules/BusinessModalEdit'
import BusinessModalUpdate from './modules/BusinessModalUpdate.vue'
import JDate from '@/components/jeecg/JDate'


import JInput from '@/components/jeecg/JInput'
export default {
  name: "EngineerList",
  mixins: [JeecgListMixin],
  components: {
    BusinessModal,
    BusinessConfigModal,
    BusinessModalEdit,
    BusinessListPrint,
    BusinessModalUpdate,
    JInput,
    JDate
  },
  data() {
    return {
      opeList: [],
      statusList: ['存续中', '已逾期', '已完结', '已续存', '即将到期','已冻结'],
      storeNameList: ['沙市玉桥店', '公安一店'],
      typeList: ['寄存', '过桥', '续存', '回收', '销售', '车辆库管', '信用贷款', '其他'],
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      queryParam: {
        name: null,
        bdetail:null,
        reception:null,
        typeR:null,
        statusR:null,
        num: null,
        tel: null,
        endTime1: null,
        endTime2: null,
        startTime1: null,
        startTime2: null,
        startTime3: null,
        endTime3: null,
        odd: null
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        { title: '单号', dataIndex: 'odd', width: 100, align: "center" },
        { title: '门店名称', dataIndex: 'storeName', width: 100, align: "center" },
        { title: '渠道来源', dataIndex: 'source', width: 60, align: "center" },
        {
          title: '日期', dataIndex: 'createTimeStr2', width: 80, align: "center",
          sorter: (a, b) => a.createTime - b.createTime
        },
        { title: '客户姓名', dataIndex: 'name', width: 60, align: "center" },
        { title: '业务状态', dataIndex: 'status', width: 60, align: "center", scopedSlots: { customRender: "customRenderFlag" } },
        {
          title: '状态提醒', dataIndex: 'fundSource', width: 90, align: "center", scopedSlots: { customRender: "customRenderFlag2" },
          sorter: (a, b) => {
            if (a.fundSource == undefined && b.fundSource == undefined)
              return
            if (a.fundSource == undefined)
              return false
            else if (b.fundSource == undefined)
              return true
            return a.fundSource.match(/\d/g).join("") - b.fundSource.match(/\d/g).join("")
          }
        },
        // { title: '业务类型', dataIndex: 'type', width: 60, align: "center"},
        { title: '出货价/还款金额', dataIndex: 'deliveryPrice', width: 100, align: "center" },
        { title: '利润', dataIndex: 'profit', width: 70, align: "center" },
        { title: '业务类型', dataIndex: 'type', width: 70, align: "center" },
        // { title: '身份证号', dataIndex: 'idNumber', width: 120, align: "center" },
        { title: '业务员', dataIndex: 'ope', width: 80, align: "center" },
        { title: '操作人员', dataIndex: 'createUserStr', width: 80, align: "center" },
        {
          title: '寄存到期时间/出货时间', dataIndex: 'endTime', width: 100, align: "center",
          sorter: (a, b) => new Date(a.endTime) - new Date(b.endTime)
        },
        // updateTimeStr操作时间
        {
          title: '操作时间', dataIndex: 'updateTimeStr', width: 90, align: "center"
        },
        {
          title: '操作', dataIndex: 'action', width: 150, align: "center",
          // fixed: 'right',
          scopedSlots: { customRender: 'action' },
        }
      ],
      url: {
        // 这里添加查询的接口
        list: "/business/list",
        exportXlsUrl: "/business/exportExcel",
        batchSetStatusUrl: "/BusinessManage/batchSetStatus",
        detail: "/business/getBusinessManageInfo",
        delete: "/business/delete"
      },
    }
  },
  created(){
    let query = this.$route.query
    if(query.hasOwnProperty('status')){
      if(query.status == '已逾期'){
      this.queryParam.status = query.status
        this.queryParam.endTime1 = query.date[0]
        this.queryParam.endTime2 = query.date[1]
      }else if(query.status == '存续中' && query.state == 0){
        this.queryParam.status = query.status
        this.queryParam.endTime1 = query.date[0]
        this.queryParam.endTime2 = query.date[1]
      }else if(query.status == '存续中' && query.state == 1){
        this.queryParam.startTime1 = query.date[0]
        this.queryParam.startTime2 = query.date[1] 
      }
    }
    // 从query里拿参数
  },
  methods: {
    CusHandleExportXls() {
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        this.handleExportXls()
      } else {
        this.$message.warning("请选择要导出的信息行！")
      }
    },
    CusHandleExportXlsAll() {
      this.handleExportXlsAll("所有业务列表")
    },
    handleAdd2: function () {
      this.$refs.BusinessConfigModal.add();
      this.$refs.BusinessConfigModal.title = "业务配置";
      this.$refs.BusinessConfigModal.disableSubmit = false;
    },
    myHandlePrint(record) {
      this.$refs.BusinessListPrint.show(record, this.url.detail);
      this.$refs.BusinessListPrint.title = "打印";
    },
    myHandleDetail(record, opeType, title) {
      this.$refs.BusinessModalEdit.editCus(record, opeType, this.url.detail);
      this.$refs.BusinessModalEdit.title = title;
      this.$refs.BusinessModalEdit.disableSubmit = true;
    },
    handleUpdate(record, title) {
      this.$refs.BusinessModalUpdate.editCus(record, this.url.detail);
      this.$refs.BusinessModalUpdate.title = title;
      this.$refs.BusinessModalUpdate.disableSubmit = false;
    },
    searchQuery() {
      // 操作reception
      if(this.queryParam.reception != null){
        this.queryParam.startTime3 = moment(this.queryParam.reception[0]).format("YYYY-MM-DD")
        this.queryParam.endTime3 = moment(this.queryParam.reception[1]).format("YYYY-MM-DD")
      }
        this.loadData(1);
    },
    searchReset() {
      this.queryParam = {
        name: null,
        num: null,
        reception:null,
        detail:null,
        tel: null,
        endTime1: null,
        typeR:null,
        statusR:null,
        endTime2: null,
        startTime1: null,
        startTime2: null,
        startTime3: null,
        endTime3: null,
        odd: null,
        storeName: null
      }
      this.loadData(1);
    },
    handleEdit: function (record, opeType, title) {
      this.$refs.BusinessModalEdit.editCus(record, opeType, this.url.detail);
      this.$refs.BusinessModalEdit.title = title;
      this.$refs.BusinessModalEdit.disableSubmit = false;
    },
    handleInfo: function (record) {
      this.$refs.engineerInfoModal.edit(record);
      this.$refs.engineerInfoModal.title = "业务查看";
      this.$refs.engineerInfoModal.disableSubmit = false;
      if (this.btnEnableList.indexOf(1) === -1) {
        this.$refs.engineerInfoModal.isReadOnly = true
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>